<!-- 合同类型编辑/新增/查看 -->
<template>
    <div class="type-change-box">
        <el-breadcrumb separator="/" class="bread-title">
			<el-breadcrumb-item :to="{ path: '/contractTypeManage' }">合同类型管理</el-breadcrumb-item>
			<el-breadcrumb-item>{{pageType}}</el-breadcrumb-item>
		</el-breadcrumb>
        <el-form :rules="rules"  :model="typeForm" ref="typeForm" label-width="180px"  style="max-width:550px">
			<el-form-item label="合同类型名称：" prop="name">
			  	 <el-input v-model.trim="typeForm.name" v-if="typeStatus !='view'"></el-input>
                <span v-else>{{typeForm.name}}</span>
			</el-form-item>
    	    <el-form-item label="单合同上限金额(元)：" prop="maxMoney">
			  	 <el-input v-model.trim="typeForm.maxMoney"  v-if="typeStatus !='view'"></el-input>
                   <span v-else>{{typeForm.maxMoney}}</span>
			</el-form-item>
            <el-form-item label="单合类型编号：" v-if="typeStatus !='add'">
			  	 <el-input disabled="" v-model.trim="typeForm.code" type="number" v-if="typeStatus =='edit'"></el-input>
                 <span v-if="typeStatus =='view'">{{typeForm.code}}</span>
			</el-form-item>
            <el-form-item label="是否到期预警：">
                <el-select v-model.trim="typeForm.expirationWarning" placeholder="请选择" v-if="typeStatus !='view'">
                    <el-option label="是" :value="0"></el-option>
                    <el-option label="否" :value="1"></el-option>
                </el-select>
                <span v-else>{{typeForm.expirationWarning== 0?"是":"否"}}</span>
			</el-form-item>
            <el-form-item label="到期预警周期(月)：" prop="expirationWarningCycle">
			  	 <el-input v-model.trim="typeForm.expirationWarningCycle"  v-if="typeStatus !='view'"></el-input>
                   <span v-else>{{typeForm.expirationWarningCycle}}</span>
			</el-form-item>
            <el-form-item label="到期预警提前量(月)：" prop="expirationWarningAdvance">
			  	 <el-input v-model.trim="typeForm.expirationWarningAdvance" v-if="typeStatus !='view'"></el-input>
                   <span v-else>{{typeForm.expirationWarningAdvance}}</span>
			</el-form-item>
            <el-form-item label="是否强制范本：" prop="applyTemplate">
                <el-select v-model.trim="typeForm.applyTemplate" placeholder="请选择" v-if="typeStatus !='view'">
                  <el-option label="是" :value="0"></el-option>
                  <el-option label="否" :value="1"></el-option>
                </el-select>
                <span v-else>{{typeForm.applyTemplate=='0'?"是":"否"}}</span>
			</el-form-item>
            <el-form-item label="合同概述提示内容模板：" prop="templateOutline">
			  	 <el-input  type="textarea"
                            :rows="6"
                            placeholder="请输入内容"
                            v-if="typeStatus !='view'"
                            v-model.trim="typeForm.templateOutline">
                </el-input>
                <span v-else>{{typeForm.templateOutline}}</span>
			</el-form-item>
            <el-form-item label="关键条款提示内容模板：" prop="templatePrompt">
			  	<el-input  type="textarea"
                            :rows="6"
                            placeholder="请输入内容"
                            v-if="typeStatus !='view'"
                            v-model.trim="typeForm.templatePrompt">
                </el-input>
                <span v-else>{{typeForm.templatePrompt}}</span>
			</el-form-item>


			<el-form-item style="text-align:center" v-if="typeStatus !='view'">
				<el-button type="primary"  @click="save">保存</el-button>
                <el-button type="primary"  @click="back">取消</el-button>
			</el-form-item>

		</el-form>
        <!-- 操作记录 -->
        <audit-table :tableData='historyTableData'  v-if="typeStatus =='view'"></audit-table>
        <p class="back-btn" v-if="typeStatus =='view'">
            <el-button type="primary"  @click="back">关闭</el-button>
        </p>
    </div>

</template>

<script>
import api from '@/api/apiPath'
import auditTable from '../common/auditTable' //审核记录表

export default {
    components: { 'audit-table':auditTable},
	data () {
		return {
            typeForm:{

            },
            typeStatus:"",
            pageType:"",
            typeFunction:{
                add:()=>{
                    this.pageType = "新增";
                },
                edit:()=>{
                    this.pageType = "编辑";
                    this.loadDetail();
                },
                view:()=>{
                    this.pageType = "详情";
                    this.loadDetail();
                }
            },
            historyTableData:[],//详情视图历史记录
            rules:{
                name:[
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            if (!value) {
                                    return callback(new Error('请输入合同类型名称'));
                            }
                            if(value.length>10){
                                    return callback(new Error('合同类型名称长度不能大于10'));
                            }
                            callback();
                        }
                    }
                ],
                applyTemplate:[
                    {required: true,message: '请选择是否强制范本', trigger: 'change'}
                ],
                maxMoney:[
                    {
                        required: false,
                        validator: (rule, value, callback) => {
                            let flatReg = /^\d+(\.\d{0,2})?$/;
                            if(!value) return callback();
                            if(!flatReg.test(value)){
                                    return callback(new Error('格式不正确'));
                            }
                            callback();
                        }
                    }
                ],
                expirationWarningCycle:[
                    {
                        required: false,
                        validator: (rule, value, callback) => {
                            let flatReg = /^[1-9]?[0-9]+$/;
                            if(!value ) return callback();
                            if(!flatReg.test(value)){
                                    return callback(new Error('格式不正确'));
                            }
                            callback();
                        }
                    }
                ],
                expirationWarningAdvance:[
                    {
                        required: false,
                        validator: (rule, value, callback) => {
                            let flatReg = /^[1-9]?[0-9]+$/;
                            if(!value) return callback();
                            if(!flatReg.test(value)){
                                    return callback(new Error('格式不正确'));
                            }
                            callback();
                        }
                    }
                ],
                templatePrompt:[
                    { required: false, min: 0, max: 500, message: '长度不得超过500个字符', trigger: ['change'] }
                ],
                templateOutline:[
                    { required: false, min: 0, max: 500, message: '长度不得超过500个字符', trigger: ['change'] }
                ],
            }
        }
    },
    methods:{
        save(){
            this.$refs.typeForm.validate((valid)=>{
                if(!valid){
                        return false;
                }
                let apiList = {add:'ADDTYPEMANAGE',edit:'EDITTYPEMANAGE'}
                this.axios.post(`${api[apiList[this.typeStatus]]}`,this.typeForm).then(res => {
                    if (res.data.code == 200) {
                        this.$router.go(-1)
                        this.$message({
                            type: 'success',
                            message: '添加成功',
                        });
                    }
                })
            })
        },
        back(){
              this.$router.go(-1)
        },
        //加载详情
        loadDetail(){
            let params = {
                id:this.listId,
                code:this.listCode
            };
            this.axios.post(`${api.TYPEMANAGEDETAIL}`,{id:this.listId}).then(res => {
                    if (res.data.code == 200) {
                        this.typeForm = res.data.data.typeManage;
                        this.historyTableData = res.data.data.operateList;
                    }
                })
        },
	},
	created () {
       let {pageType,listId,listCode} = this.$route.query;
       this.listId = listId;
       this.listCode = listCode;
       this.typeStatus = pageType;
       this.typeFunction[pageType]();
    },
	destroyed() {

	},
	filters: {

	}
}

</script>

<style lang="stylus" >
.type-change-box{
     .type-item-title{
      font-size:18px;
      color:#303133;
      font-weight :700;
  }
  .back-btn{
      padding:30px 0;
      text-align :center;
  }
}

</style>
